<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script type="text/javascript" src="static/layui/layui.js"></script>
		<script type="text/javascript" src="static/echarts5.4.0/echarts.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/axios.min.js"></script>
		<script type="text/javascript" src="static/js/config.js"></script>
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
				margin: 0;
				background-color: #efefef;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.container {
				width: 100%;
				height: 100%;
			}

			.show-grid {
				padding: 20px;
				box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
			}

			.show-icon-img {
				width: 60px;
				height: 60px;
			}

			.grid-text {
				font-size: 48px;
				font-weight: 800;
			}

			.text-red,
			.line-red,
			.lines-red {
				color: #c11508;
			}

			.text-green,
			.line-green,
			.lines-green {
				color: #39b54a;
			}

			.grid-xt-color,
			.line-xt {
				color: #ec2a65;
			}

			.grid-hx-color,
			.line-hx {
				color: #37aaff;
			}

			.grid-mx-color,
			.line-mx {
				color: #e5b828;
			}

			.grid-td-color,
			.line-td {
				color: #7b49e6;
			}

			.grid-demo {
				margin: 1rem;
				padding: 20px;
				line-height: 60px;
				text-align: center;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
			}

			.grid-nav {
				margin: 1rem;
				padding: 5px;
				padding-left: 81px;
				line-height: 60px;
				text-align: left;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
				font-size: 22px;
			}

			.grid-tag {
				font-size: 12px;
				vertical-align: middle;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0px 8px;
				height: 25px;
				font-family: Helvetica Neue, Helvetica, sans-serif;
				white-space: nowrap;
			}

			.grid-tag[class*="line-"]::after {
				content: " ";
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border: 1px solid currentColor;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				box-sizing: border-box;
				border-radius: inherit;
				z-index: 1;
				pointer-events: none;
			}

			.grid-demo-bg1 {
				background-color: #63BA79;
			}

			.layui-col-md3 {
				height: 60px;
			}

			.layui-tab-title {
				background-color: #fff;
			}

			.animation-grid {
				width: 98.5%;
				height: auto;
				/* position: absolute; */
				background-color: #ffffff;
				/* top: 38%; */
				/* margin-top: 90px; */
				/* padding: 20px; */
				margin: 15px;
				margin-top: 93px;
				border-radius: 10px;
			}
			}

			.layui-tab-title {
				background-color: #fff;
			}

			.layui-layer-btn .layui-layer-btn0 {
				border-color: #063683;
				background-color: #063683;
				color: #fff;
				margin-right: 37%;
			}

			.layui-layer {
				border-radius: 10px;
			}

			.layui-layer-title {
				border: 0;
				text-align: center;
				padding: 0 20px 0 20px;
			}

			.layui-tab-content {
				padding-top: 15px;
				padding-bottom: 5px;
			}

			.layui-table td,
			.layui-table th {
				width: 6.25rem;
				font-size: 10px;
				text-align: center;
				border-top-width: 1px;
				border-right-width: 0px;
				border-bottom-width: 1px;
				border-left-width: 0px;
			}
		</style>
		<script>
			$(function() {
				$(".sign_out").click(function() {
					localStorage.clear();
					window.location = 'login.html'
				});
				$('.userinfo').hover(function() {});
				$('.userinfo').hover(function() {});
				$('#xueyang').mouseover(function() {
					layer.open({
						type: 1,
						title: '血氧数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#xinlv').mouseover(function() {
					layer.open({
						type: 1,
						title: '心率数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#huxilv').mouseover(function() {
					layer.open({
						type: 1,
						title: '呼吸率数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#maixiang').mouseover(function() {
					layer.open({
						type: 1,
						title: '脉象数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#ganzhijuli').mouseover(function() {
					layer.open({
						type: 1,
						title: '感知距离数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#shangchuangshijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '上床时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#rushuishijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '入睡时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#qingxishijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '清醒时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#xichuangshijian').mouseover(function() {
					layer.open({
						type: 1,
						title: '离床时间数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#lichuangbaojian').mouseover(function() {
					layer.open({
						type: 1,
						title: '离床报警数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#wendu').mouseover(function() {
					layer.open({
						type: 1,
						title: '温度数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext + '</div>'
					});
				});
				$('#shidu').mouseover(function() {
					layer.open({
						type: 1,
						title: '湿度数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + xueyangtext +
							'</div>'
					});
				});
				$('#qiya').mouseover(function() {
					layer.open({
						type: 1,
						title: '气压数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' +
							xueyangtext + '</div>'
					});
				});
				$('#co2').mouseover(function() {
					layer.open({
						type: 1,
						title: 'CO2数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' +
							xueyangtext + '</div>'
					});
				});
				$('#tvoc').mouseover(function() {
					layer.open({
						type: 1,
						title: 'TVOC数据',
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' +
							xueyangtext + '</div>'
					});
				});
			})
		</script>
	</head>
	<body>
		<div id="app">
			<input id="equname" type="hidden" value="" />
			<input id="tapval" type="hidden" value="" />
			<div style="background-color: #e5e5e5; height: 59px;"></div>
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="height: 120px;">
				<ul class="layui-tab-title">
					<!-- <li class="layui-this">按时筛选</li> -->
					<li class="layui-this">按日筛选</li>
					<li>按月筛选</li>
					<li>按年筛选</li>
					<!-- <li>按年筛选</li> -->
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="container" style="">
							<blockquote class="layui-elem-quote" style="height: 62px;">
								<span style="font-size: 20px ;font-weight: 800;float: left;">按日筛选</span>
								<div class="layui-form" style="float: left;margin-left: 40px;">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label" style="font-size: 14px; width: 100px;line-height: 25px;padding: 9px 0 15px 9px;">筛选类型:</label>
											<div class="layui-input-block">
												<!-- <select name="interest" id="datatype">
														<option value="">请选择类型</option>
														<option value="1" selected="">指检查记录</option>
														<option value="2">连续监测记录</option>
													</select>
													 -->
												<input type="radio" name="datatype" value="1" title="指检查记录">
												<input type="radio" name="datatype" value="2" title="连续监测记录">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label" style="font-size: 12px; width: 100px;">日期条件:</label>
											<div class="layui-inline" id="sotime">
												<div class="layui-input-inline">
													<input type="text" autocomplete="off" class="layui-input" placeholder="请选择年月日" id="date1">
												</div>
											</div>
										</div>
									</div>
								</div>

								<a class="layui-btn layui-btn-normal" href="#" style="float: left;height: 30px;line-height: 26px !important;" v-on:click="searchs(1)">筛选</a>

							</blockquote>

						</div>

					</div>
					<div class="layui-tab-item">
						<div class="container" style="">
							<blockquote class="layui-elem-quote" style="height: 62px;">
								<span style="font-size: 20px ;font-weight: 800;float: left;">按月筛选</span>
								<div class="layui-form" style="float: left;margin-left: 40px;">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label" style="font-size: 14px; width: 100px;line-height: 25px;padding: 9px 0 15px 9px;">筛选类型:</label>
											<div class="layui-input-block">
												<!-- <select name="interest" id="datatype">
														<option value="">请选择类型</option>
														<option value="1" selected="">指检查记录</option>
														<option value="2">连续监测记录</option>
													</select>
													 -->
												<input type="radio" name="datatype" value="1" title="指检查记录" checked="">
												<input type="radio" name="datatype" value="2" title="连续监测记录">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label" style="font-size: 12px; width: 100px;">日期条件:</label>
											<div class="layui-inline" id="sotime">
												<div class="layui-input-inline">
													<input type="text" autocomplete="off" class="layui-input" placeholder="请选择年月份" id="date2">
												</div>
											</div>
										</div>
									</div>
								</div>

								<a class="layui-btn layui-btn-normal" href="#" style="float: left;height: 30px;line-height: 26px !important;" v-on:click="searchs(2)">筛选</a>

							</blockquote>
						</div>

					</div>
					<div class="layui-tab-item">
						<div class="container" style="">
							<blockquote class="layui-elem-quote" style="height: 62px;">
								<span style="font-size: 20px ;font-weight: 800;float: left;">按年筛选</span>
								<div class="layui-form" style="float: left;margin-left: 40px;">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label" style="font-size: 14px; width: 100px;line-height: 25px;padding: 9px 0 15px 9px;">筛选类型:</label>
											<div class="layui-input-block">
												<!-- <select name="interest" id="datatype">
														<option value="">请选择类型</option>
														<option value="1" selected="">指检查记录</option>
														<option value="2">连续监测记录</option>
													</select>
													 -->
												<input type="radio" name="datatype" value="1" title="指检查记录" checked="">
												<input type="radio" name="datatype" value="2" title="连续监测记录">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label" style="font-size: 12px; width: 100px;">日期条件:</label>
											<div class="layui-inline" id="sotime">
												<div class="layui-input-inline">
													<input type="text" autocomplete="off" class="layui-input" placeholder="请选择年份" id="date3">
												</div>
											</div>
										</div>
									</div>
								</div>

								<a class="layui-btn layui-btn-normal" href="#" style="float: left;height: 30px;line-height: 26px !important;" v-on:click="searchs(3)">筛选</a>

							</blockquote>
						</div>
					</div>
				</div>
				<div class="animation-grid" style="margin-top: 0;">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0;">
						<legend></legend>
					</fieldset>

					<div class="grid-nav show-grid" style=" padding-left:10px;padding-right: 20px;padding-bottom: 30px;margin-bottom: 30px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;">
						<table class="layui-table">
							<thead>
								<tr>
									<th style="width: 170px;">日期</th>
									<th style="width: 138px;">血氧<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="xueyang" οnmοuseοver="showtap(1,xueyang)"></i></th>
									<th style="width: 140px;">心率<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="xinlv"></i></th>
									<th style="width: 140px;">呼吸率<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="huxilv"></i></th>
									<th style="width: 140px;">脉象<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="maixiang"></i>
									</th>
									<th style="width: 140px;">感知距离<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="ganzhijuli"></i>
									</th>
									<th style="width: 140px;">上床时间<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="shangchuangshijian"></i>
									</th>
									<th style="width: 140px;">入睡时间<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="rushuishijian"></i>
									</th>
									<th style="width: 140px;">清醒时间<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="qingxishijian"></i>
									</th>
									<th style="width: 140px;">离床时间<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="lichuangbaojian"></i></th>
									<th style="width:140px;">温度<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="wendu"></i></th>
									<th style="width: 140px;">湿度<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="shidu"></i></th>
									<th style="width: 140px;">气压<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="qiya"></i></th>
									<th style="width: 140px;">CO2<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="co2"></i></th>
									<th style="width: 140px;">TVOC<i class="layui-icon layui-icon-tips" style="margin-left: 5px; line-height: 30px;" id="tvoc"></i></th>
								</tr>

							</thead>
						</table>
						<table class="layui-table" style="margin-top: -11px;" v-if="loglist!=''">
							<tbody style="overflow-y:auto; overflow-x:hidden;height:400px;display: block;">
								<tr v-for="item in loglist" :key="item.id" v-on:click="ecsetdata(item.id)">
									<th style="width: 178px;">{{item.starttime}}</th>
									<th style="width: 143px;">{{item.avgspo2}}%</th>
									<th style="width: 143px;">{{item.avgrtHeartRate}}</th>
									<th style="width: 143px;">{{item.avgrtBreath}}</th>
									<th style="width: 143px;">{{item.avgmai}}</th>
									<th style="width: 143px;">{{item.avgrrange}}CM</th>
									<th style="width: 143px;">20230410 20:01:10</th>
									<th style="width: 143px;">20230410 22:01:10</th>
									<th style="width: 143px;">20230410 06:01:10</th>
									<th style="width: 143px;">20230411 07:11:10</th>
									<th style="width: 143px;">{{item.avgtemp}}℃</th>
									<th style="width: 143px;">{{item.avghumidity}}%</th>
									<th style="width: 143px;">{{item.avgpressure}}kPa</th>
									<th style="width: 143px;">{{item.avgco2}}PPM</th>
									<th style="width: 143px;">{{item.avgtvoc}}</th>
								</tr>
								</thead>
						</table>
						<div style="width: 100%;height: 300px;font-size: 18px;text-align: center;padding-top: 100px;" v-else>暂无数据</div>
					</div>
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>血氧记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-md12">
							<div id="main0" style="width:100%;height:260px;"></div>
						</div>
						<div class="layui-col-md12" style="text-align: center;">
							<div class="layui-row" style="text-align: center;">
								<div class="layui-col-md3"> 平均值：80%</div>
								<div class="layui-col-md3"> 范围:80 ~ 100</div>
							</div>
						</div>
					</div>
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>心跳记录<span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-md12">
							<div id="main" style="width:100%;height:260px;"></div>
						</div>
						<div class="layui-col-md12" style="text-align: center;">
							<div class="layui-row" style="text-align: center;">
								<div class="layui-col-md3"> 平均值：80次/每分钟</div>
								<div class="layui-col-md3"> 范围:65 ~ 110</div>
							</div>
						</div>

					</div>
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>呼吸记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-md12">
							<div id="main2" style="width:100%;height:260px;"></div>
						</div>
						<div class="layui-col-md12" style="text-align: center;">
							<div class="layui-row" style="text-align: center;">
								<div class="layui-col-md3"> 平均值：12次/每分钟</div>
								<div class="layui-col-md3"> 范围:12 ~ 20</div>
							</div>
						</div>
					</div>
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>脉象记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-md12">
							<div id="main3" style="width:100%;height:260px;"></div>
						</div>
						<div class="layui-col-md12" style="text-align: center;">
							<div class="layui-row" style="text-align: center;">
								<div class="layui-col-md3"> 平均值：<span style="color: #ba0003;">一息五至</span>（5.5）</div>
								<div class="layui-col-md3"> 范围:<span style="color: #000;">一息三至</span>（3.5） ~ <span style="color: #000;">一息七至</span>（7.0）</div>
							</div>
						</div>
					</div>
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>体动记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-md12">
							<div id="main4" style="width:100%;height:260px;"></div>
						</div>
						<div class="layui-col-md12" style="text-align: center;">
							<div class="layui-row" style="text-align: center;">
								<div class="layui-col-md3"> 平均值：80CM</div>
								<div class="layui-col-md3"> 范围:50 ~ 80</div>
							</div>
						</div>
					</div>
				</div>


				<div class="info">
					<div class="nav-left">
						<a class="login"></a>
						<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
						<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
					</div>
					<div class="nav-right">
						<ul>
							<li><a href="monitoring.html" v-if="uInfoData.loginType !=1">监测</a></li>
							<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
							<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
							<li><a href="call_p.html">离床报警</a></li>
							<li><a href="#">康养中心</a></li>
							<li><a href="#">中医问诊</a></li>
						</ul>
					</div>
					<div class="userinfo" id="userinfo">
						<img src="static/image/user.png" />
						<!-- <div class="red-dot"></div> -->
						<ul class="user_dropdown">
							<li class="dropdown_item user_ctrl">
								<div class="nickname">{{uInfoData.userName}}</div>
								<div class="sign_out">退出</div>
							</li>
							<li class="dropdown_item msg_item">
								<a href="user.html" target="_blank">
									<span>个人中心</span>
								</a>
							</li>
							<li class="dropdown_item msg_item">
								<a href="my_message.html" target="_blank">
									<span>我的消息</span>
									<span class="msg_unread unread_count show">0-</span>
								</a>
							</li>
							<li class="dropdown_item">
								<a href="equipment.html">
									<span>设备</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div style="width:1200px; height:450px ;position: absolute;left: 15%;background-color: #ffffff; box-shadow: 1px 1px 50px rgba(0,0,0,.3); display: none;overflow-y: scroll;" id="tapshow">
			<a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" style="width: 16px;height: 16px;background-position: 1px -40px;cursor: pointer;position: absolute;right: 10px;top: 10px;" onclick="closeshow()"></a>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>血氧记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main01" style="width:100%;height:260px;"></div>
				</div>
				<div class="layui-col-md12" style="text-align: center;">
					<div class="layui-row" style="text-align: center;">
						<div class="layui-col-md3"> 平均值：80%</div>
						<div class="layui-col-md3"> 范围:80 ~ 100</div>
					</div>
				</div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>心跳记录<span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main02" style="width:100%;height:260px;"></div>
				</div>
				<div class="layui-col-md12" style="text-align: center;">
					<div class="layui-row" style="text-align: center;">
						<div class="layui-col-md3"> 平均值：80次/每分钟</div>
						<div class="layui-col-md3"> 范围:65 ~ 110</div>
					</div>
				</div>

			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>呼吸记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main03" style="width:100%;height:260px;"></div>
				</div>
				<div class="layui-col-md12" style="text-align: center;">
					<div class="layui-row" style="text-align: center;">
						<div class="layui-col-md3"> 平均值：12次/每分钟</div>
						<div class="layui-col-md3"> 范围:12 ~ 20</div>
					</div>
				</div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>脉象记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main04" style="width:100%;height:260px;"></div>
				</div>
				<div class="layui-col-md12" style="text-align: center;">
					<div class="layui-row" style="text-align: center;">
						<div class="layui-col-md3"> 平均值：<span style="color: #ba0003;">一息五至</span>（5.5）</div>
						<div class="layui-col-md3"> 范围:<span style="color: #000;">一息三至</span>（3.5） ~ <span style="color: #000;">一息七至</span>（7.0）</div>
					</div>
				</div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>体动记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
			</fieldset>
			<div class="layui-row">
				<div class="layui-col-md12">
					<div id="main05" style="width:100%;height:260px;"></div>
				</div>
				<div class="layui-col-md12" style="text-align: center;">
					<div class="layui-row" style="text-align: center;">
						<div class="layui-col-md3"> 平均值：80CM</div>
						<div class="layui-col-md3"> 范围:50 ~ 80</div>
					</div>
				</div>
			</div>

		</div>

		</div>
		<script>
			var vm = new Vue({
				el: '#app', //设置当前vue对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，vue需要控制整个页面的内容，效率太低了
				data: {
					uInfoData: [],
					equName: '',
					loglist: [],
					taploglist: []
				},
				mounted() {},
				ready: function() {
					// this.getdata();
				},
				created: function() {
					this.getdata();
					this.layuint();
				},
				methods: {
					getdata: function() {
						var rloginName = localStorage.loginName;
						var equName = localStorage.equName;
						console.log(rloginName)
						if (rloginName == '' || rloginName == 'null' || rloginName == undefined) {
							layer.msg('登录过期或者无权访问！', {
								time: 1000,
								end: function() {
									location.href = 'login.html'
								}
							})
						} else {
							console.log();
							axios({
									method: 'GET',
									url: url + "/user/userInfo/lquserOwnInfo?userId=" + rloginName,
									data: {}
								})
								.then(function(response) {
									vm.uInfoData = response.data;
									var equName = response.data.userEquipmentList[0].equName;
									$('#equname').val(equName);
								})
							let data = new FormData();
							data.append('equId', equName);
							data.append('typeofMm', getyyyyMMdd());
							data.append('dataType', '1');
							data.append('queryType', '1');
							axios({
									method: 'post',
									url: url + "/history/equQueryHistoryData",
									data: data
								})
								.then(function(response) {
									vm.loglist = response.data;
									ecint();
								})
						}
					},
					layuint: function() {

						layui.use(['form', 'table', 'layedit', 'laydate', 'dropdown', 'element', 'layer'],
							function() {
								var form = layui.form,
									table = layui.table,
									layer = layui.layer,
									layedit = layui.layedit,
									laydate = layui.laydate,
									dropdown = layui.dropdown,
									element = layui.element,
									layer = layui.layer;
								forms = layui.form;
								let data = new FormData();
								data.append('equId', '07');
								data.append('typeofMm', '20230321');
								data.append('dataType', '1');
								data.append('queryType', '1');

								laydate.render({
									elem: '#date1',
									format: 'yyyyMMdd'
								});
								laydate.render({
									elem: '#date2',
									type: 'month',
									format: 'yyyyMM'
								});
								laydate.render({
									elem: '#date3',
									type: 'year',
									format: 'yyyy'
								});
								element.on('tab(docDemoTabBrief)', function(data) {
									$('#tapval').val(data.index);
									console.log('切到到了' + data.index + '：' + this.innerHTML);
								});
							});
					},
					searchs: function(tapval) {
						var dates;
						var equnames2 = $('#equname').val();
						var datatypes = $('input[name="datatype"]:checked').val(); //$('#datatype').val();
						localStorage["queryType"] = datatypes;
						var equnames = localStorage.equName;
						if (tapval == 1) {
							dates = $('#date1').val();
						}
						if (tapval == 2) {
							dates = $('#date2').val();
						}
						if (tapval == 3) {
							dates = $('#date3').val();
						}
						$.ajax({
							type: 'POST',
							url: url + '/history/equQueryHistoryData',
							async: false,
							data: {
								equId: equnames,
								typeofMm: dates,
								dataType: datatypes,
								queryType: tapval
							},
							success: function(res) {
								vm.loglist = res;
								ecint();
							}
						});
					},
					ecsetdata: function(id) {
						var queryType = localStorage.queryType;
						$.ajax({
							type: 'POST',
							url: url + '/history/quertHistoryLists',
							async: false,
							data: {
								groupId: id,
								queryType: queryType
							},
							success: function(res) {
								vm.taploglist = res;
								$('#tapshow').show();
								ecint2();
							}
						});

					}
				}
			})

			function closeshow() {
				$('#tapshow').hide();
			}

			function getyyyyMMdd() {
				var d = new Date();
				var curr_date = d.getDate();
				var curr_month = d.getMonth() + 1;
				var curr_year = d.getFullYear();
				String(curr_month).length < 2 ? (curr_month = "0" + curr_month) : curr_month;
				String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date;
				var yyyyMMdd = curr_year + "" + curr_month + "" + curr_date;
				return yyyyMMdd;
			}

			function ecint() {
				var chartDom0 = document.getElementById('main0');
				var myChart0 = echarts.init(chartDom0);
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var chartDom2 = document.getElementById('main2');
				var myChart2 = echarts.init(chartDom2);
				var chartDom3 = document.getElementById('main3');
				var myChart3 = echarts.init(chartDom3);
				var chartDom4 = document.getElementById('main4');
				var myChart4 = echarts.init(chartDom4);
				var option;
				var datas = vm.$data.loglist;
				console.log(datas.length);

				function randomData(times, val) {
					var now = new Date(times);
					var value = val;
					return {
						name: now.toString(),
						value: [times, value]
					};
				}
				let data0 = [];
				let data = [];
				let data2 = [];
				let data3 = [];
				let data4 = [];
				let now = new Date();
				if (datas.length != 0) {
					for (var a in datas) {
						var starttime = datas[a]['starttime'];
						var avgspo2 = datas[a]['avgspo2']; //血氧
						var avgrtHeartRate = datas[a]['avgrtHeartRate']; //心跳
						var avgrtBreath = datas[a]['avgrtBreath']; //呼吸
						var avgmai = datas[a]['avgmai']; //脉搏
						var avgrrange = datas[a]['avgrrange']; //体动
						data0.push(randomData(starttime, avgspo2));
						data.push(randomData(starttime, avgrtHeartRate));
						data2.push(randomData(starttime, avgrtBreath));
						data3.push(randomData(starttime, avgmai));
						data4.push(randomData(starttime, avgrrange));
					}
				} else {
					for (var i = 1; i <= 10; i++) {
						var starttimes = getCurrentTime(i);
						data0.push(randomData(starttimes, 0));
						data.push(randomData(starttimes, 0));
						data2.push(randomData(starttimes, 0));
						data3.push(randomData(starttimes, 0));
						data4.push(randomData(starttimes, 0));
					}
				}
				option0 = {
					color: ["#00ffff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data0
					}]
				};
				option = {
					color: ["#ec2a65"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option2 = {
					color: ["#37aaff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data2
					}]
				};
				option3 = {
					color: ["#e5b828"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data3
					}]
				};
				option4 = {
					color: ["#7b49e6"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data4
					}]
				};
				myChart.setOption({
					series: [{
						data: data
					}]
				});

				option && myChart0.setOption(option0);
				option && myChart.setOption(option);
				option && myChart2.setOption(option2);
				option && myChart3.setOption(option3);
				option && myChart4.setOption(option4);

			}

			function ecint2() {
				var chartDom0 = document.getElementById('main01');
				var myChart0 = echarts.init(chartDom0);
				var chartDom = document.getElementById('main02');
				var myChart = echarts.init(chartDom);
				var chartDom2 = document.getElementById('main03');
				var myChart2 = echarts.init(chartDom2);
				var chartDom3 = document.getElementById('main04');
				var myChart3 = echarts.init(chartDom3);
				var chartDom4 = document.getElementById('main05');
				var myChart4 = echarts.init(chartDom4);
				var option;
				var datass = vm.$data.taploglist;


				function randomData(times, val) {
					var now = new Date(times);
					var value = val;
					return {
						name: now.toString(),
						value: [times, value]
					};
				}
				let data0 = [];
				let data = [];
				let data2 = [];
				let data3 = [];
				let data4 = [];
				let now = new Date();
				for (var a in datass) {
					var starttime = datass[a]['sendTime'];
					var avgspo2 = datass[a]['spo2']; //血氧
					var avgrtHeartRate = datass[a]['rtHeartRate']; //心跳
					var avgrtBreath = datass[a]['rtBreath']; //呼吸
					var avgmai = datass[a]['mai']; //脉搏
					var avgrrange = datass[a]['rrange']; //体动
					data0.push(randomData(starttime, avgspo2));
					data.push(randomData(starttime, avgrtHeartRate));
					data2.push(randomData(starttime, avgrtBreath));
					data3.push(randomData(starttime, avgmai));
					data4.push(randomData(starttime, avgrrange));
				}
				option0 = {
					color: ["#00ffff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data0
					}]
				};
				option = {
					color: ["#ec2a65"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option2 = {
					color: ["#37aaff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data2
					}]
				};
				option3 = {
					color: ["#e5b828"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data3
					}]
				};
				option4 = {
					color: ["#7b49e6"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data4
					}]
				};
				myChart.setOption({
					series: [{
						data: data
					}]
				});

				option && myChart0.setOption(option0);
				option && myChart.setOption(option);
				option && myChart2.setOption(option2);
				option && myChart3.setOption(option3);
				option && myChart4.setOption(option4);

			}


			function getCurrentTime(i) {
				var date = new Date(); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var hour = repair(date.getHours()); //时
				var minute = repair(date.getMinutes()); //分
				var second = repair(date.getSeconds() + i); //秒

				//当前时间 
				var curTime = year + "-" + month + "-" + day +
					" " + hour + ":" + minute + ":" + second;
				return curTime;
			}

			//补0

			function repair(i) {
				if (i >= 0 && i <= 9) {
					return "0" + i;
				} else {
					return i;
				}
			}
		</script>
	</body>
</html>